<template>
    <div id="release">
        <div class="page-title">发布商品</div>
        <div class="container padder">
            <div class="form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品分类：" prop="da_fenlei">
                        <el-cascader
                                v-model="cascaderType"
                                :options="$store.state.brandData"
                                :props="{ expandTrigger: 'hover' }"
                                @change="changeCascader"
                        >
                            <template slot-scope="{ node, data }">
                                <div class="flex-align-center">
                                    <el-image :src="data.img" style="width: 88px"></el-image>
                                    <div class="name">
                                        {{ data.label }} <span
                                            v-if="!node.isLeaf"> <!--({{ data.children.length }})--> </span>
                                    </div>
                                </div>

                            </template>
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="商品名称：" prop="shangping_mingcheng">
                        <el-input class="input" placeholder="商品名称" v-model="ruleForm.shangping_mingcheng"></el-input>
                    </el-form-item>
                    <el-form-item label="上架价格：" prop="shangjia_jiage">
                        <el-input type="number" placeholder="上架价格" v-model.number="ruleForm.shangjia_jiage">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="商品logo：" prop="shangping_zhanshi_tu">
                        <el-upload
                                class="avatar-uploader"
                                action="/api/shanghu/Upload_Chart"
                                :show-file-list="false"
                                :http-request="up"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.shangping_zhanshi_tu" :src="ruleForm.shangping_zhanshi_tu"
                                 class="avatar">
                            <i v-if="!ruleForm.shangping_zhanshi_tu && !uploadLoading"
                               class="el-icon-plus avatar-uploader-icon"></i>
                            <i v-if="uploadLoading" class="el-icon-loading avatar-uploader-icon"></i>
                            <div class="el-upload__tip" slot="tip">*推荐上传280*210 或4:3比例的尺寸图片</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="使用说明：" prop="shiyong_shuoming">
                        <el-input type="textarea" placeholder="使用说明" rows="5"
                                  v-model="ruleForm.shiyong_shuoming"></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述：" prop="shangping_miaoshu">
                        <quill-editor ref="myQuillEditor" v-loading="quillUpdateImg" class="ql-editor"
                                      v-model="ruleForm.shangping_miaoshu"
                                      :options="editorOption"></quill-editor>
                    </el-form-item>
                    <div class="b-b padder-v m-b text-right">
                        销售价格：<span
                            class="text-danger text-2x m-r-xs">{{(ruleForm.shangjia_jiage*1.4).toFixed(2)}}</span> 元

                        <el-tooltip class="item" effect="dark" content="售价为上架价格的140%，40%为平台固定利润" placement="top">
                            <i class="el-icon-question text-lg" style="color:#5cb6ff;cursor: pointer"></i>
                        </el-tooltip>

                    </div>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')"> {{ruleForm.Id ? '更 新':'发 布'}}
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 图片上传组件辅助-->
            <el-upload
                    class="quill-uploader"
                    :action="serverUrl"
                    name="image"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                    :on-error="uploadError"
                    :before-upload="beforeUpload">
            </el-upload>

        </div>
    </div>
</template>

<script>
    import Quill from 'quill'
    import {ImageDrop} from 'quill-image-drop-module'
    import ImageResize from 'quill-image-resize-module'

    Quill.register('modules/imageDrop', ImageDrop)
    Quill.register('modules/imageResize', ImageResize)

    import {editorConfig, addQuillTitle} from '../../utils'
    import mixins from '../../mixin'

    export default {
        name: 'release',
        mixins: [mixins],
        components: {},
        data() {
            return {
                serverUrl: '/public/index.php/api/shanghu/Upload_Chart',  // 这里写你要上传的图片服务器地址
                editorOption: {
                    placeholder: '请输入商品描述',
                    theme: 'snow',  // or 'bubble'
                    modules: {
                        toolbar: {
                            container: editorConfig,
                            handlers: {
                                'image':
                                    function (value) {
                                        if (value) {
                                            document.querySelector('.quill-uploader input').click()
                                        } else {
                                            this.quill.format('image', false);
                                        }
                                    }
                            }
                        },
                        history: {
                            delay: 1000,
                            maxStack:
                                50,
                            userOnly:
                                false
                        },
                        imageDrop: true,
                        imageResize: {
                            displayStyles: {
                                backgroundColor: 'black',
                                border:
                                    'none',
                                color:
                                    'white'
                            }
                            ,
                            modules: ['Resize', 'DisplaySize',]
                        },
                    }
                },
                ruleForm: {
                    da_fenlei: '',
                    xiao_fenlei: '',
                    shangping_mingcheng: '',
                    shangjia_jiage: '',
                    shangping_miaoshu: '',
                    shiyong_shuoming: '',
                    shangping_zhanshi_tu: ''
                }
                ,
                rules: {
                    da_fenlei: [{required: true, message: '请选择分类', trigger: 'change'}],
                    shangping_mingcheng: [{required: true, message: '请输入商品名称'}],
                    shangjia_jiage: [
                        {type: 'number', required: true, message: '请输入商品价格'},
                        {
                            type: 'number', min: 0.001, message: '商品价格不能小于0', transform(val) {
                                return +val
                            }
                        },

                    ],
                    shangping_zhanshi_tu: [{required: true, message: '请上传商品图片', trigger: 'change'}],
                    shiyong_shuoming: [{required: true, message: '请输入商品使用说明', trigger: 'change'}],
                    shangping_miaoshu: [{required: true, message: '请输入商品描述'}],

                },
                quillUpdateImg: false,
                uploadLoading: false,
                cascader: [],
                cascaderType: null
            }
        },
        computed: {},
        methods: {
            //商品logo上传
            up(config) {
                this.uploadLoading = true;
                let fd = new FormData();
                fd.append('image', config.file);
                this.$axios.post(config.action, fd)
                    .then(res => {
                        this.uploadLoading = false;
                        if (res.code === `200`) {
                            this.ruleForm.shangping_zhanshi_tu = res.msg
                        }
                    })
            },
            //选择分类
            changeCascader(val) {
                this.ruleForm.da_fenlei = val[0];
                this.ruleForm.xiao_fenlei = val[1];
                console.log(val)
            },
            //发布商品
            submitForm(form) {
                let url = this.ruleForm.Id ? '/api/shanghu/xiugai_shangping_up' : '/api/shanghu/fabu_shangping';
                this.$refs[form].validate(valid => {
                    if (valid) {
                        this.$axios.post(url, this.ruleForm)
                            .then(res => {
                                if (res.code === `200`) {
                                    this.$message.success(res.msg);
                                    let type = this.ruleForm.Id ? res.data.shangping_zhuangtai : 0;
                                   this.$router.push({path: '/seller/proManage', query: {type}});
                                }
                            })
                    }
                })
            },
            beforeUpload(res, file) { // 显示loading动画
                this.quillUpdateImg = true
            },
            // 上传图片成功
            uploadSuccess(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.code === '200') {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', res.msg)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('图片插入失败')
                }
                // loading动画消失
                this.quillUpdateImg = false
            },
            // 上传图片失败
            uploadError(res, file) {
            }
        },
        async created() {
            let Id = this.$route.query.id;
            if (Id) {
                this.$axios.post(`/api/shanghu/xiugai_shangping_get`, {Id})
                    .then(res => {
                        if (res.code === `200`) {
                            let {
                                Id, guishu_id, fenlei_da, fenlei_xiao,
                                shangping_mingcheng, shangjia_chujia, shangping_tupian,
                                shangping_jieshao, shangping_shuoming
                            } = res.data.data;
                            this.ruleForm.Id = Id;
                            this.ruleForm.da_fenlei = fenlei_da;
                            this.ruleForm.xiao_fenlei = fenlei_xiao;
                            this.ruleForm.shangping_mingcheng = shangping_mingcheng;
                            this.ruleForm.shangjia_jiage = shangjia_chujia / 100;
                            this.ruleForm.shiyong_shuoming = shangping_shuoming;
                            this.ruleForm.shangping_miaoshu = shangping_jieshao;
                            this.ruleForm.shangping_zhanshi_tu = shangping_tupian;

                            this.cascaderType = [fenlei_da, fenlei_xiao]
                        }
                    })
            }

        },
        mounted() {
            addQuillTitle()
        }
    }
</script>

<style lang="less" scoped>
    .form {
        width: 1000px;

        /deep/ .el-form {
            .el-input, .el-select，.el-cascader {
                width: 300px !important;
            }

            .ql-container {
                & > .ql-editor {
                    padding: 15px;
                }
            }

            .ql-editor {
                width: 100%;

                &.quill-editor {
                    padding: 0
                }

                /deep/ .ql-container {
                    height: 400px;

                    .ql-tooltip.ql-editing, .ql-tooltip {
                        left: 100px !important;
                    }
                }

            }
        }

    }
</style>
